<template>
  <div>
    <!-- 顶部导航栏 -->
    <mt-header title="菜品分类" fixed> </mt-header>
    <div class="middle">
      <!-- 选项卡 -->
      <div class="navbar">
        <mt-navbar
          v-model="active"
          v-for="(item, index) of category"
          :key="index"
        >
          <mt-tab-item :id="item.id.toString()">{{
            item.category_name
          }}</mt-tab-item>
        </mt-navbar>
      </div>
      <!-- 实现面板 -->
      <mt-tab-container>
        <mt-tab-container-item>
          <div
            class="container_item"
            v-for="(item, index) of dishes"
            :key="index"
          >
            <router-link :to="`/detail/${item.id}`">
              <img class="item_img" :src="item.image" alt="" />
              <span class="title">{{ item.subject }}</span>
            </router-link>
            <!-- <img
              class="collect"
              src="../assets/collect1.png"
              alt=""
              :id="item.id"
              @click="onCollection"
            /> -->
            <button
              class="collect"
              :id="item.id"
              :data-id="index"
              @click="onCollection"
            >
              收藏
            </button>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
    <!-- 底部导航栏 -->
    <mt-tabbar v-model="current" fixed>
      <mt-tab-item id="home">
        <img
          src="../assets/home_enable.png"
          slot="icon"
          v-if="current == 'home'"
        />
        <img src="../assets/home_disable.png" slot="icon" v-else />
        首页
      </mt-tab-item>
      <mt-tab-item id="classify">
        <img
          src="../assets/classify_enable.png"
          slot="icon"
          v-if="current == 'classify'"
        />
        <img src="../assets/classify_disable.png" slot="icon" v-else />
        分类
      </mt-tab-item>
      <mt-tab-item id="me">
        <img src="../assets/me_enable.png" slot="icon" v-if="current == 'me'" />
        <img src="../assets/me_disable.png" slot="icon" v-else />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<style scoped>
.navbar {
  width: 100%;
  position: fixed;
}
.mint-navbar {
  width: 20%;
  border: 1px solid #e54d4236;
  background-color: #e54d4205;
}

.mint-tab-container {
  width: 79%;
  top: 0px;
  left: 75px;
  padding-left: 5px;
}
.mint-header {
  background-color: #e54d42;
}
.mint-tabbar > .mint-tab-item.is-selected {
  background-color: #e54d4236;
  color: #e54d42;
}
.item_img {
  width: 150px;
  height: 100px;
  border-radius: 5px;
  margin-right: 10px;
}
.middle {
  margin-top: 45px;
  margin-bottom: 55px;
}
.title {
  position: absolute;
  top: 10px;
  color: black;
  font-size: 20px;
  font-weight: 600;
}
.container_item {
  position: relative;
  margin-bottom: 10px;
}
.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 3px solid#e54d42;
  color: #e54d42;
  margin-bottom: -3px;
  background-color: #e54d422a;
}
.collect {
  width: 50px;
  height: 20px;
  background-color: #eee;
  font-size: 10px;
  color: #888;
  border: 0;
  border-radius: 3px;
  position: absolute;
  bottom: 5px;
  right: 10px;
}
</style>
<script>
export default {
  data() {
    return {
      current: "classify",
      category: [],
      dishes: [],
      active: "1",
    };
  },
  methods: {
    // 添加收藏
    onCollection(event) {
      // 获取当前事件id
      if (this.$store.state.islogin == 1) {
        let menu_id = event.currentTarget.id;
        let uid = this.$store.state.user.id;
        let cid = event.target.dataset.id;
        console.log(cid);
        // // 验证是否收藏
        // this.axios
        //   .get("/collected", {
        //     params: {
        //       menu_id: menu_id,
        //       uid: uid,
        //     },
        //   })
        //   .then((res) => {
        //     let result = res.data.result;
        //     if (result.length == 1) {
        //       let collect = document.getElementsByClassName("collect")[cid];
        //       collect.innerHTML = "已收藏";
        //     }
        //   });
        // 添加收藏
        this.axios
          .post("/insert_col", "uid=" + uid + "&menu_id=" + menu_id)
          .then((res) => {});
        let collect = document.getElementsByClassName("collect")[cid];
        collect.innerHTML = "已收藏";
      } else {
        window.location.href = "/login";
      }
    },
  },
  mounted() {
    // 发送http请求以获取期望的菜谱分类数据
    this.axios.get("/category_all").then((res) => {
      this.category = res.data.results;
    });
    this.axios
      .get("/index_all", {
        params: {
          id: this.active,
        },
      })
      .then((res) => {
        this.dishes = [];
        let results = res.data.results;
        results.forEach((item) => {
          if (item.image != null) {
            item.image = require("../assets/articleimages/" + item.image);
          }
          this.dishes.push(item);
        });
      });
  },

  watch: {
    current(value) {
      if (value == "home") {
        this.$router.push("/");
      } else if (value == "classify") {
        this.$router.push("/classify");
      } else if (value == "me") {
        this.$router.push("/me");
      }
    },
    active(value) {
      // 点击导航栏搜索先关分类数据
      this.axios
        .get("/index_all", {
          params: {
            id: this.active,
          },
        })
        .then((res) => {
          this.dishes = [];
          let results = res.data.results;
          results.forEach((item) => {
            if (item.image != null) {
              item.image = require("../assets/articleimages/" + item.image);
            }
            this.dishes.push(item);
          });
        });
    },
  },
};
</script>